<template>
	<view class="move-boxs">
		<movable-area class="m-movable-area">
			<movable-view :out-of-bounds="false" :x="pos.x" :y="pos.y" direction="all" @change="onChange">
				<button open-type="contact" class="cu-btn bg-white round">
					<view>
						<view class="cuIcon-service text-green"></view>
						<view class="btn-text text-size-10">{{props.title}}</view>
					</view>
				</button>
			</movable-view>
		</movable-area>
	</view>

</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	import {
		ref
	} from 'vue';
	const props = defineProps({
		shopId: {
			type: String,
			default: ''
		},
		icon:{
			type: String,
			default:'repairfill'
		},
		title:{
			type: String,
			default:'平台'
		}
	});
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const pos = ref({
		x: 0,
		y: 0
	})
	const posOld = ref({
		x: 0,
		y: 0
	})
	let windowWidth = 0
	uni.getSystemInfo({
		success: (e: any) => {
			windowWidth = 20
			pos.value.x = windowWidth
		}
	});
	const onChange = (e: any) => {
		if (e.detail.x >= windowWidth) {
			pos.value.x = windowWidth
		} else {
			posOld.value.x = e.detail.x
		}

		posOld.value.y = e.detail.y
	}
	const handleClickItem = (e: any) => {
		if (setting.token.length > 0) {
			emit('action', e);
		} else {
			uni.navigateTo({
				url: '/views/login/login'
			})
		}

	};
</script>

<style lang="scss" scoped>
	.cu-btn {
		width: 3rem;
		height: 3rem;
		pointer-events: all;
		background-color: white;
		border-radius: 50%;
		border: 1px solid #ECECEC;

		.cuIcon-service {
			font-size: 1.2rem;
			line-height: 1.2rem;
		}

		.btn-text {
			width: 2rem;
			text-align: center;
		}
	}

	.m-movable-area {
		display: block;
		height: 100%;
		width: 100%;
	}

	.move-boxs {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 30vh;
		padding-right: 2rem;
		pointer-events: none;
	}
</style>

